///引入ajax
import ajax from '../utils/ajax.js'

//ajax调用本地data.json 文件
let dataArr = []; // 该数据为初始化数据 所有的书
if (!localStorage.getItem('data')) {
    ajax({
        url: 'https://api.iynn.cn/mock?t=2',

    }).then(res => {
        if (res.code == 0) {
            dataArr = res.data
            console.log(dataArr);
            //将数据存到本地
            localStorage.setItem('data', JSON.stringify(dataArr))
                // 调用渲染函数
            renderData(dataArr)
            console.log('第一次走ajax');
        }
    })
} else {
    dataArr = JSON.parse(localStorage.getItem('data'))
        // 调用渲染函数
    renderData(dataArr)
    console.log('走缓存');
}

//渲染数据
console.log(dataArr);

function renderData(dataArr) {
    let str = ``
    dataArr.forEach((item, index) => {
        str += `<tr>
        <td>${index+1}</td>
        <td>${item.title}</td>
        <td>${item.user}</td>
        <td>${item.date}</td>
        <td>
            <span id="${index}" class="del" style="color: red;">删除</span>&emsp;
            <span id="${index}" class="edi" style="color:blue;">编辑</span>
           
        </td>
    </tr>`
    })
    document.querySelector('#Tbody').innerHTML = str
}
// 通过事件委托绑定点击事件
let add = document.querySelector('.add')
let searchtitle = document.querySelector('.searchtitle')
let searchAuthor = document.querySelector('.searchAuthor')
let searchTime = document.querySelector('.searchTime')
document.querySelector('#Tbody').onclick = function(e) {
    console.log(e.target);
    // // 增加功能
    // if (e.target.className.includes('btn-primary')) {
    //     console.log('新增');
    //     // 点击添加按钮时，把数据放到数组中
    //     dataArr.push({
    //         "title": searchtitle.value,
    //         "user": searchAuthor.value,
    //         "date": searchTime.value,
    //         "id": Number(dataArr[dataArr.length - 1].id) + 1
    //     })
    //     // 更新本地缓存
    //     localStorage.setItem('data', JSON.stringify(dataArr))
    //     // 重新渲染
    //     renderData(dataArr)
    // }

    //删除功能
    if (e.target.className.includes('del')) {
        console.log('删除');
        dataArr.forEach(function(item1, index) {
            if (e.target.id == index) {
                dataArr.splice(index, 1)
                    // 更新本地缓存
                localStorage.setItem('data', JSON.stringify(dataArr))
                    //重新渲染修改后的数据
                renderData(dataArr)
            }
        })
    }

    //编辑功能
    let ensure = document.querySelector('.editSure')
    let modalTitle = document.querySelector('.modalTitle')
    let modalAuthor = document.querySelector('.modalAuthor')
    let modalTime = document.querySelector('.modalTime')
    if (e.target.className.includes('edi')) {
        console.log('编辑');
        //显示模态框
        $('#myModal').modal('show');
        // 修改模态框标题
        document.querySelector('.modal-title').innerHTML = '编辑'
            // 实现数据回填
        console.log(dataArr[e.target.id]);
        modalTitle.value = dataArr[e.target.id].title
        modalAuthor.value = dataArr[e.target.id].user
        modalTime.value = dataArr[e.target.id].date
            //确认按钮绑定点击事件，点击关闭模态框并把数据存如接口数据中
        ensure.onclick = function() {
            // console.log(123);
            $('#myModal').modal('hide');
            dataArr[e.target.id].title = modalTitle.value
            dataArr[e.target.id].user = modalAuthor.value
            dataArr[e.target.id].date = modalTime.value
                // 更新本地缓存
            localStorage.setItem('data', JSON.stringify(dataArr))
                // 重新渲染
            renderData(dataArr)
        }




    }

}
add.onclick = function() {
    // 增加功能
    console.log('新增');
    // 点击添加按钮时，把数据放到数组中
    dataArr.push({
            "title": searchtitle.value,
            "user": searchAuthor.value,
            "date": searchTime.value,
            "id": Number(dataArr[dataArr.length - 1].id) + 1
        })
        // 更新本地缓存
    localStorage.setItem('data', JSON.stringify(dataArr))
        // 重新渲染
    renderData(dataArr)

}